<template>
  <div class="allOrderContainer">
    <div class="aud_right">
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalListNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData2"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      stripe
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="报告名称"></el-table-column>
      <el-table-column prop="is_deleted" label="是否删除"></el-table-column>
      <el-table-column prop="create_time" label="创建时间">
        <template slot-scope="scope">
          <span>{{
            scope.row.create_time
              ? new Date(Number(scope.row.create_time) * 1000).toLocaleString()
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="update_time"
        label="更新时间"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.update_time
              ? new Date(Number(scope.row.update_time) * 1000).toLocaleString()
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleDetail(scope.row)" data-tracker="P43-1"
            >详情</el-button
          >
          <!-- <el-button
            type="primary"
            size="mini"
            @click="handleEditer(scope.$index, scope.row)"
            >修改</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      title="报告详情"
      :visible.sync="reportDetailPopShow"
      width="40%"
      :before-close="handlereportDetailClose"
    >
      <el-form
        :model="ruleFormDetail"
        :rules="rulesDetail"
        ref="ruleFormDetail"
        class="demo-ruleForm"
      >
        <div style="width: 100%" class="Signature_pop">
          <el-form-item label="报告名称" prop="name">
            <el-input v-model="ruleFormDetail.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="温层" prop="Thermosphere">
            <el-select
              v-model="ruleFormDetail.Thermosphere"
              disabled
            ></el-select>
          </el-form-item>
          <el-form-item label="运单号" prop="code">
            <el-input v-model="ruleFormDetail.code" disabled></el-input>
          </el-form-item>
          <el-form-item label="订单号" prop="ordercode">
            <el-input v-model="ruleFormDetail.ordercode" disabled></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="create_time">
            <el-input v-model="ruleFormDetail.create_time" disabled></el-input>
          </el-form-item>
          <el-form-item label="更新时间" prop="update_time">
            <el-input v-model="ruleFormDetail.update_time" disabled></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="creator_id">
            <el-input v-model="ruleFormDetail.creator_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="最后更新人" prop="last_editor_id">
            <el-input
              v-model="ruleFormDetail.last_editor_id"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="组织部门" prop="saas_company_id">
            <el-input
              v-model="ruleFormDetail.saas_company_id"
              disabled
            ></el-input>
          </el-form-item>
          <hr />
          <div>
            <div>
              <el-button
                type="primary"
                plain
                size="mini"
                icon="el-icon-upload2"
                class="improtput"
                @click="toLead"
                v-permission="'reportdata_reportmanage_import'"
                >导入</el-button
              >
              <el-button
                type="primary"
                plain
                size="mini"
                icon="el-icon-download"
                class="improtOut"
                @click="handleExport"
              >
                <!-- <span class="reqimportOUt">导出</span> -->
                <a :href="reqUrl">导出</a>
              </el-button>
            </div>
            <span
              style="
                display: block;
                float: left;
                width: 104px;
                text-align: right;
                padding-right: 15px;
              "
              >报告详情</span
            >
            <span>详情内容</span>
          </div>
        </div>
      </el-form>
    </el-dialog>
    <!-- <el-dialog
      title="编辑报告"
      :visible.sync="reportEditPopShow"
      width="40%"
      :before-close="handlereportEditClose"
    >
      <el-form
        :model="ruleFormEdit"
        :rules="rulesEdit"
        ref="ruleFormEdit"
        class="demo-ruleForm"
      >
        <div style="width: 100%" class="Signature_pop">
          <el-form-item label="报告名称" prop="name">
            <el-input v-model="ruleFormEdit.name"></el-input>
          </el-form-item>
          <el-form-item label="温层" prop="Thermosphere">
            <el-select v-model="ruleFormEdit.Thermosphere"></el-select>
          </el-form-item>
          <el-form-item label="运单号" prop="code">
            <el-input v-model="ruleFormEdit.code"></el-input>
          </el-form-item>
          <el-form-item label="订单号" prop="ordercode">
            <el-input v-model="ruleFormEdit.ordercode"></el-input>
          </el-form-item>
          <hr />
          <div>
            <span style="display: block;float: left;width: 104px;text-align: right;padding-right: 15px;">报告详情</span>
            <span>详情内容</span>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="determinereportEditFn">取 消</el-button>
        <el-button type="primary" @click="reportEditFn"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import { ReportmanageList } from "@/api/auditing";
export default {
  name: "signaturemanagementList",
  components: {},
  data() {
    return {
      reportDetailPopShow: false,
      reportEditPopShow: false,
      // ruleFormEdit:{
      //     name:"报告名称",
      //     Thermosphere:"冷藏（2~8℃）",
      //     code:"12313123132",
      //     ordercode:"232323232232"
      // },
      // rulesEdit:{},
      ruleFormDetail: {
        name: "报告名称",
        Thermosphere: "冷藏（2~8℃）",
        code: "12313123132",
        ordercode: "232323232232",
        create_time: "",
        update_time: "",
        creator_id: "",
        last_editor_id: "",
        saas_company_id: "",
      },
      rulesDetail: {},
      multipleSelection: [],
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 100, //一页多少条
      tableData2: [],
    };
  },
  computed: {},
  mounted() {
    this.ReportmanageListFn(this.pageNum, this.pageSize);
  },
  methods: {
    // 导出
    handleExport() {
      if (this.orderIdNums.length > 0) {
        const filtersData = [
          "order_no",
          "status",
          "waybill_no",
          "sender_name",
          "sender_phone",
          "sender_company",
          "sender_address",
          "sender_remark",
          "router",
          "From_network_name",
          "to_network_name",
          "from_region_name",
          "to_region_name",
          "receiver_name",
          "receiver_phone",
          "receiver_company",
          "receiver_address",
          "receiver_remark",
        ];
        const data = {
          ids: this.orderIdNums,
          export_fields: filtersData,
        };
        reqExportNotice(data).then((res) => {
          if (res.code === 10000) {
            this.reqUrl = "https://" + res.data.loaded_url;
            let aDom = document.createElement("a");
            aDom.href = this.reqUrl;
            aDom.click();
          }
        });
      } else {
        this.reqUrl = "javascript:;";
        this.$message({
          type: "warning",
          message: "请选择你要导出的数据！",
        });
        return false;
      }
    },
    //详情
    handleDetail(valObj) {
      this.reportDetailPopShow = true;
      this.ruleFormDetail.name = valObj.name;
      this.ruleFormDetail.Thermosphere = valObj.Thermosphere;
      this.ruleFormDetail.code = valObj.code;
      this.ruleFormDetail.ordercode = valObj.ordercode;
      this.ruleFormDetail.create_time = valObj.create_time;
      this.ruleFormDetail.update_time = valObj.update_time;
      this.ruleFormDetail.creator_id = valObj.creator_id;
      this.ruleFormDetail.last_editor_id = valObj.last_editor_id;
      this.ruleFormDetail.saas_company_id = valObj.saas_company_id;
    },
    handlereportDetailClose() {
      this.reportDetailPopShow = false;
    },
    //编辑按钮
    // handleEditer() {
    //     this.reportEditPopShow = true
    // },
    //弹出框关闭按钮
    // handlereportEditClose(){
    //     this.reportEditPopShow = false
    // },
    //弹出框取消按钮
    // determinereportEditFn(){
    //     this.reportEditPopShow = false
    // },
    //弹出框确定按钮
    // reportEditFn(){

    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.ReportmanageListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.ReportmanageListFn(this.pageNum, this.pageSize);
    },
    //报告列表函数
    ReportmanageListFn(pageNumval, pageSizeval) {
      const data = {
        page: pageNumval,
        page_size: pageSizeval,
      };
      ReportmanageList(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.tableData2 = res.data.list;
          this.pageNum = res.data.pagination.current_page;
          this.totalListNum = res.data.pagination.total;
          this.pageSize = res.data.pagination.per_page_count;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.Signature_pop .el-form-item__label {
  float: left !important;
  width: 120px !important;
}
/deep/.Signature_pop .el-input {
  width: 65% !important;
}
/deep/.Signature_pop .el-upload__tip {
  padding-left: 120px !important;
}
/deep/.Signature_pop .el-select > .el-input {
  width: 100% !important;
}
.allOrderContainer {
   width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;
  .button_aud {
    float: left;
 
  }
  .aud_right {
    margin: 0px 0px 10px 0px;
    float: right;
  
  }
}
</style>